<template>
  <view class="container">
    <!-- 顶部信息区 -->
    <view class="profile-section">
      <image class="bg" src="https://pic.616pic.com/ys_bnew_img/00/36/15/FM8djWkxe4.jpg" mode="aspectFill"></image>
      <view class="user-info" @click="gotoUpdateInfo">
        <image class="avatar" :src="userInfo.avatar? getBaseUrl+userInfo.avatar : '/static/mine1.png'"></image>
        <view class="info-box">
          <text class="nickName">{{userInfo.nickName || '未登录用户'}}</text>
        <!--  <text class="desc">{{userInfo.desc || '点击登录查看详细信息'}}</text> -->
        </view>
      </view>
    </view>

    <!-- 功能列表 -->
   <view class="function-list">
       <view class="function-item" @click="gotoTemp">
         <view class="icon">
           <uni-icons type="chat" size="24" color="#27AE60"></uni-icons>
         </view>
         <view class="title">客服中心</view>
       </view>
	   
	   <view class="function-item" @click="gotoIntegration">
	     <view class="icon">
	       <uni-icons type="star" size="24" color="#27AE60"></uni-icons>
	     </view>
	     <view class="title">积分中心</view>
	   </view>
	<!--  <view class="function-item" @click="gotoTer">
	     <view class="icon">
	       <uni-icons type="flag" size="24" color="#27AE60"></uni-icons>
	     </view>
	     <view class="title">俄罗斯方块</view>
	   </view> -->
	   <view class="function-item" @click="gotoIntegrationMark">
	     <view class="icon">
	       <uni-icons type="flag" size="24" color="#27AE60"></uni-icons>
	     </view>
	     <view class="title">标注积分管理</view>
	   </view>
	   <view class="function-item" @click="gotoMark">
	     <view class="icon">
	       <uni-icons type="vip" size="24" color="#27AE60"></uni-icons>
	     </view>
	     <view class="title">标注项目</view>
	   </view>
     </view>

    <!-- 退出登录按钮 -->
    <view class="logout-btn" @click="handleLogout">
      <text>退出登录</text>
    </view>
  </view>
</template>
<script>
// #ifdef MP-WEIXIN
export default {
  onShareAppMessage() {
    return {
      title: "高潜人才",
      path: `/pages/mine/mine`
    }
  },
  onShareTimeline() {
      return {
        title: '专业人才测评，发现你的潜力！',
        query: 'from=timeline',          // 可选参数
        imageUrl: '/static/wx.png' // 朋友圈专用图片
      }
    }
}
// #endif
</script>
<script setup>
	import getBaseUrl from '../../utils/baseUrl';
import { ref, onMounted,computed } from 'vue'
// 用户信息（示例数据）
const userInfo = ref({
  avatar: '/static/avatar.jpg',
  nickName: '华为坊工程师',
  desc: '华为坊工程师',
  isLogin: true
})
const gotoTer = ()=>{
	uni.navigateTo({
		url:'/pages/test/test'
	})
}
const gotoMark = ()=>{
	uni.navigateTo({
		url:'/pages/markIntegration/markIntegration'
	})
}
const gotoTemp =()=>{

	  uni.navigateTo({ url: '/pages/temp/temp' });
}
const gotoIntegration=()=>{
	 uni.navigateTo({ url: '/pages/integration/integration' });
}

const gotoIntegrationMark=()=>{
	 uni.navigateTo({ url: '/pages/integration/intergrationMark/intergrationMark' });
}
// 退出登录处理
const handleLogout = async () => {
  uni.showModal({
    title: '提示',
    content: '确定要退出登录吗？',
    success: async (res) => {
      if (res.confirm) {
        // 清除本地存储[5,6](@ref)
        uni.removeStorageSync('token')
        uni.removeStorageSync('userInfo')
        
        // 调用登出接口（示例）
        // try {
        //   await uni.request({
        //     url: '/api/logout',
        //     method: 'POST'
        //   })
        // } catch (error) {
        //   console.error('登出异常:', error)
        // }
        
        // 更新用户状态[3](@ref)
        userInfo.value = {
          isLogin: false,
          avatar: '',
          nickName: '',
          desc: ''
        }
        
        // 跳转登录页[6](@ref)
        uni.reLaunch({
          url: '/pages/mine/login/login'
        })
      }
    }
  })
}
const loadData = ()=>{
	console.log(uni.getStorageSync("userInfo"))
	userInfo.value=uni.getStorageSync("userInfo")
}
const gotoUpdateInfo=()=>{
	uni.navigateTo({
		url:'/pages/mine/updateInfo/updateInfo'
	})
}
onMounted(() => {	
  loadData()
  uni.$on('refreshInfoData',loadData);
})
</script>
<style scoped>
.container {
  background: #f8f9fa;
  min-height: 100vh;
}

/* 顶部信息区 */
.profile-section {
  height: 300rpx;
  position: relative;
}

.profile-section .bg {
  width: 100%;
  height: 100%;
  filter: brightness(0.9);
}

.profile-section .user-info {
  position: absolute;
  bottom: -80rpx;
  left: 30rpx;
  display: flex;
  align-items: center;
}

.profile-section .user-info .avatar {
  width: 160rpx;
  height: 160rpx;
  border-radius: 50%;
  border: 4rpx solid #fff;
  box-shadow: 0 4rpx 12rpx rgba(0,0,0,0.1);
}

.profile-section .user-info .info-box {
  margin-left: 30rpx;
}

.profile-section .user-info .info-box .nickName {
  font-size: 36rpx;
  color: #2d3436;
  font-weight: 500;
  display: block;
  margin-bottom: 10rpx;
}

.profile-section .user-info .info-box .desc {
  font-size: 28rpx;
  color: #666;
}

/* 功能列表 */
.function-list {
  margin-top: 120rpx;
}

.function-list ::v-deep .uni-list-item__container {
  padding: 28rpx 30rpx;
}
.function-item {
	background: white;
  display: flex;
  align-items: center;
  padding: 20rpx;
  border-bottom: 1rpx solid #eaeaea;
  cursor: pointer;
}

.icon {
  margin-right: 20rpx;
}

.title {
  font-size: 32rpx;
  color: #333;
}
/* 退出按钮 */
.logout-btn {
  margin: 60rpx 30rpx;
  height: 88rpx;
  background: #fff;
  border-radius: 44rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #EB5757;
  font-size: 32rpx;
  box-shadow: 0 4rpx 12rpx rgba(235,87,87,0.1);
  transition: all 0.3s;
}

.logout-btn:active {
  transform: scale(0.98);
  opacity: 0.9;
}    
</style>